<template>
  <div class="operation-menu-wrapper" :class="'file-type-' + fileType">
    <el-button-group class="operate-group">

      <el-button
        size="mini"
        type="primary"
        icon="el-icon-upload2"
        id="uploadFileId"
        >
        <el-upload

                style="display: inline-block"
                action="xxx"
                :http-request="uploadFile"
                class="abc"
                :show-file-list="false"
        >
        上传
        </el-upload>
      </el-button>

      <el-button size="mini" type="primary" icon="el-icon-plus" @click="addFolder()"  v-if="!fileType && fileType !== 6"
        >新建文件夹</el-button
      >
      <el-button
        size="mini"
        type="primary"

        icon="el-icon-delete"
        >删除</el-button
      >
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-rank"
        v-if="!fileType && fileType !== 6"
        >移动</el-button
      >
      <!-- <el-button size="mini" icon="el-icon-document-copy">拷贝</el-button> -->
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-download"
        v-if="fileType !== 6"
        >下载</el-button
      >
    </el-button-group>

    <!-- 批量操作 -->
    <el-button
      class="batch-opera-btn"
      icon="el-icon-finished"
      size="mini"
    >
      {{ batchOperate ? '取消批量操作' : '批量操作' }}
    </el-button>
    <!-- 文件展示模式 -->
    <div class="change-file-model">
      <el-radio-group v-model="fileGroupLable" size="mini">
        <el-radio-button :label="0"> <i class="el-icon-tickets"></i> 列表 </el-radio-button>
        <el-radio-button :label="1"> <i class="el-icon-s-grid"></i> 网格 </el-radio-button>
        <el-radio-button :label="2" v-if="fileType === 1"> <i class="el-icon-date"></i> 时间线 </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 选择表格列 -->
    <!--<SelectColumn class="select-column"></SelectColumn>-->

    <!-- 多选文件下载，页面隐藏 -->
    <a
      target="_blank"

    ></a>
  </div>
</template>

<script>
import { Base64 } from 'js-base64';
import {addFloader} from "@/api/api";
import Axios from 'axios';

export default {
  name: 'OperationMenu',
    inject:['reload'],
  props: {
    selectionFile: Array,
    operationFile: Object,
    batchOperate: Boolean
  },
  components: {
  },
  data() {
    return {
      fileTree: [],
      batchDeleteFileDialog: false,
      fileGroupLable: 0 //  文件展示模式
    }
  },
  computed: {
    //  当前查看的文件路径
    filePath: {
      get() {
        return this.$route.query.filePath
      },
      set() {
        return ''
      }
    },
    //  文件类型索引
    fileType: {
      get() {
        return Number(this.$route.query.fileType)
      },
      set() {
        return 0
      }
    },
    //  上传文件组件参数
    uploadFileData: {
      get() {
        let res = {
          filePath: this.filePath,
          isDir: 0
        }
        return res
      },
      set() {
        return {
          filePath: '/',
          isDir: 0
        }
      }
    },
    // 文件查看模式 0列表模式 1网格模式 2 时间线模式
    // fileModel() {
    //   return this.$store.getters.fileModel
    // }
  },
  watch: {
    // fileType(newValue, oldValue) {
    //   if (oldValue === 1 && this.fileModel === 2) {
    //     this.$store.commit('changeFileModel', 0)
    //     this.fileGroupLable = 0
    //   }
    // }
  },
  mounted() {

  },
    methods:{
        uploadFile(file){
            let fromData = new FormData()
           debugger
            fromData.append('file', file.file)
            let filePath = this.$route.query.filePath==null?"/":this.$route.query.filePath;
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'file_path':Base64.encode(filePath),
                    'access_flag':1
                }
            }
            Axios.post('/api/file/upload', fromData, config).then( res => {
                let data = res.data
                if(data.errcode == 0){
                    console.log(data.data)
                    this.reload()
                    // this.form.avatar= "/api/file/download/"+data.data.fileName;
                    this.$message.success("success")
                }else {
                    this.$message.success("fail")
                }
            }).catch( res => {
                  console.log(res)
            })
        },
        //  新建文件夹按钮：打开模态框
        addFolder() {
            this.$prompt('请输入文件夹名称', '创建文件夹', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(({ value }) => {
                   // alert("sdfdsfasfsafa")
                    let filePath = this.$route.query.filePath==null?"/":this.$route.query.filePath;
                    if (filePath!="/"){
                        filePath=filePath+"/"+value
                    }else {
                        filePath="/"+value
                    }
                    //alert(filePath)
                    addFloader(filePath).then(res=>{

                            this.reload()
                        this.$message({
                            type: 'success',
                            message: 'success'
                        })
                    })

                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
        }
    }
}
</script>

<style scope >
  /*.el-button >>> .abc{*/
    /*display: inline-block !important;*/
  /*}*/


    /*.el-upload{*/
    /*display: inline-block !important;*/
  /*}*/



 .abc{
    display: inline-block ;
  }
  .operation-menu-wrapper .file-type-6{
    margin: 8px 0;
    justify-content: flex-end
  }

  .operation-menu-wrapper{
    padding :16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .operate-group{
  flex :1;}

  .change-file-model{
    margin-right: 8px

  }
                .batch-opera-btn{
                  margin-right :8px

                }
</style>

<!--<style  scoped>
#avatar-uploader
  display inline-block !important
/deep/ .el-upload
  display inline-block !important

span /deep/ .data-v-629a4ce8
  display inline-block !important

.operation-menu-wrapper.file-type-6
  margin 8px 0
  justify-content flex-end
.operation-menu-wrapper
  padding 16px 0
  display flex
  justify-content space-between
  align-items: center;
  .operate-group
    flex 1
  .change-image-model,
  .change-file-model
    margin-right 8px
  .batch-opera-btn
    margin-right 8px
</style>-->
